/* Copyright (c) 2019 the Octant contributors. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */

@mixin electron-header {
  -webkit-app-region: drag;
  padding-left: var(--padding-left);
}

.main-container {
  // Navigation's color variables for Light Theme.

  :host-context(body) {
    --navigation-border-color: rgb(215, 215, 215);
    --navigation-background-color: #0079AD;
  }

  // Navigation's color variables for Dark Theme.
  :host-context(body.dark) {
    --navigation-border-color: #304250;
    --navigation-background-color: #304250;
  }

  :host-context(body.platform-darwin) {
    --padding-left: 70px;
  }

  :host-context(body.electron) {
    .notifier {
      @include electron-header;
    }

    .header {
      @include electron-header;

      .branding {
        display: none;
      }
    }

  }

  .header-centered {
    margin: auto 0;
  }

  .header {
    background: var(--navigation-background-color);
    flex-wrap: wrap;
    height: auto;

    .header-nav {
      padding-left: 1rem;

      .namespace-switcher,
      .input-filter {
        margin-right: 10px;
      }

      .namespace-switcher {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 20px;
      }

      .input-filter {
        z-index: 999; // clarity's data-grid beats this
        width: 300px;
      }
    }
  }

  .content-container {
    .navigation {
      border-right: 1px solid var(--navigation-border-color);
    }

    .content-area {
      flex: 1;
      padding: 0;
      overflow: hidden;
    }
  }
}
